<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="迅傲DEMO">
  <meta name="author" content="Zentao">

  <title>JQUERY——autocomplete插件(select版)</title>
  <link href="/docs/css/zui.min.css" rel="stylesheet">
  <link href="/docs/css/doc.css" rel="stylesheet">
  <link rel="stylesheet" href="jquery.combobox.css" />
</head>
<body>
  <header data-tab="html5">
  </header>
  <div id="main">
  	<div class="page-header">
        <h1>JQUERY——autocomplete插件(select版)</h1>
    </div>
    <section id="hello">
		<div class="page-header">
          <h2>说明</h2>
        </div>
        <p>参数1：类型：array，为json格式数组（可由PHP代码返回,必填）</p>
        <p>参数2：类型：string,下拉框按钮图片，可根据需要替换（替换后需根据实际情况，在页面重写CSS样式：.combobox .button样式）</p>
		 <p>参数3：类型：string,父框架的ID,必填</p>
		 <p>参数4：类型：string实际提交值的隐藏文本框ID,必填</p>
		 <p>参数5：类型：boolean,是否标准select（当不传此参数时默认为false,当为true时输入框将不能输入）</p>
		 <p>参数6：类型：string,callback的JS函数名</p>
		 <p>参数7：类型：string,自定义位置偏移量（left,top）</p>
		 <p>参数8：类型：boolean,当输入值不在下拉框值中，是否清除input框内容，默认false</p>
		 <p>参数9：类型：int,下拉框显示最大值，默认10条</p>
		 
		 <p>注：当在编辑页面时，input ID为combo的值应为name值（例：中国）,input ID为comboval的值应为id值（例：1）。此时是无模糊查询</p>
		 <p>支持“bs”值及“name”值的模糊查询</p>
<pre class="prettyprint">
CSS和JS加载
&ltlink rel="stylesheet" href="jquery.combobox.css" /&gt
&ltscript type="text/javascript" src="jquery.js">&lt/script&gt
&ltscript type="text/javascript" src="jquery.combobox.js">&lt/script&gt
html:
&ltdiv id="demoselect" style="float:left; display:inline;"&gt
&ltinput type="text" id="combo" value="" /&gt
&ltinput type='hidden' id='comboval' value="" /&gt
&lt/div&gt
&ltdiv id="demoselect2" style="margin-left:10px; float:left; display:inline;"&gt
&ltinput type="text" id="combo2" value="" /&gt
&ltinput type='hidden' id='comboval2' value="" /&gt
&lt/div&gt
js:
var array=[{"id":"1","bs":"chinese",'name':"中国"},{"id":"2","bs":"jpan",'name':"日本"},{"id":"3","bs":"usa",'name':"美国"},{"id":"4","bs":"russia",'name':"俄罗斯"}];
示例1、jQuery('#combo').combobox(array, {imageUrl : '/images/dropdown.gif'},"demoselect","comboval");
示例2、jQuery('#combo2').combobox(array, {imageUrl : '/images/dropdown.gif'},"demoselect2","comboval2",true);
</pre>
<div class="page-header">
          <h2>演示</h2>
        </div>
      </section>
    <div class="jumbotron text-center">
      <iframe src="demo.htm" frameborder="0" width="100%" height="150" scrolling="no" ></iframe>
      <a href="../autocomplete.zip">完整DEMO下载</a>
    </div>
  </div>
 <script src="/assets/jquery.js"></script>
  <script src="/dist/js/zui.min.js"></script>
  <script src="/assets/google-code-prettify/prettify.js"></script>
  <script src="/docs/js/doc.js"></script>
 
</body>
</html>